﻿@model FTBS.Models.Entities.Film

@{
    ViewBag.Title = "Tạo phim mới";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";

}
<legend style="margin-top: 10px">Thêm Phim</legend>

@using (Html.BeginForm("Create", "Film", null, FormMethod.Post,
                              new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
      
    <table class="table striped bordered hovered">
        <tr>
            <td style="padding: 0px 10px 0px 20px">
                <div id="txtFilmName" style="font-weight: bold">
                    @Html.LabelFor(model => model.Name, "Tên phim")
                </div>
                <div class="input-control text">
                    @Html.EditorFor(model => model.Name)
                    <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.Name)</p>
                    @if (ViewBag.FilmName != null)
                    {
                        <p style="color: red; font-size: 10pt">Phim này đã tồn tại!</p>
                    }
                </div>
            </td>
            <td style="padding: 0px 10px 0px 20px">
                <div style="font-weight: bold">
                    @Html.LabelFor(model => model.Length, "Độ dài")
                </div>
                <div class="input-control text">
                    @Html.EditorFor(model => model.Length)
                    <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.Length)</p>
                </div>
            </td>
        </tr>
        <tr>
            <td style="padding: 0px 10px 0px 20px">
                <div style="font-weight: bold">
                    @Html.LabelFor(model => model.Nation, "Quốc gia")
                </div>
                <div class="input-control text">
                    @Html.EditorFor(model => model.Nation)
                    <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.Nation)</p>
                </div>
            </td>
            <td style="padding: 0px 10px 0px 20px">
                <div style="font-weight: bold">
                    @Html.LabelFor(model => model.Director, "Đạo diễn phim")
                </div>
                <div class="input-control text">
                    @Html.EditorFor(model => model.Director)
                    <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.Director)</p>
                </div>
            </td>
        </tr>
        <tr>
            <td style="padding: 0px 10px 0px 20px">
                <div style="font-weight: bold">
                    @Html.LabelFor(model => model.AgeLimit, "Lứa tuổi")
                </div>
                <div class="input-control text">
                    @Html.EditorFor(model => model.AgeLimit)
                    <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.AgeLimit)</p>

                </div>
            </td>
            <td style="padding: 0px 10px 0px 20px">
                <div style="font-weight: bold">
                    @Html.LabelFor(model => model.Actor, "Các diễn viên tham gia")
                </div>
                <div class="input-control text">
                    @Html.EditorFor(model => model.Actor)
                    <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.Actor)</p>
                </div>
                <div>
                </div>
            </td>
        </tr>
        <tr>
            <td style="padding: 0px 10px 0px 20px">
                <div style="font-weight: bold">
                    @Html.LabelFor(model => model.CategoryId, "Thể loại")
                </div>
                <div id="categoryCombobox">
                    @Html.Partial("CategoryComboboxPartial", Model)
                </div>
                @Html.ActionLink("Thêm Thể Loại", "Create", "Category")
            </td>
            <td style="padding: 0px 10px 0px 20px">
                <div style="font-weight: bold">
                    @Html.LabelFor(model => model.FormatId, "Định dạng")
                </div>
                <div id="formatCombobox">
                    @Html.Partial("FormatComboboxPartial", Model)
                </div>
                @Html.ActionLink("Thêm Định Dạng", "Create", "Format")
            </td>
        </tr>
        <tr>
            <td style="padding: 0px 10px 0px 20px">
                <div style="font-weight: bold">
                    @Html.LabelFor(model => model.Description, "Miêu tả phim")
                </div>
                <div class="input-control textarea">
                    @Html.TextAreaFor(model => model.Description)
                    <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.Description)</p>
                </div>
            </td>
            <td style="padding: 0px 10px 0px 20px">
                <div style="font-weight: bold">
                    @Html.LabelFor(model => model.Description, "Điểm IMDb")
                </div>
                <div class="input-control text">
                    @Html.EditorFor(model => model.IMDb)
                    <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.IMDb)</p>
                </div>
            </td>
        </tr>
        <tr>
            <td style="padding: 0px 10px 0px 20px" colspan="2">
                <div style="font-weight: bold">
                    @Html.LabelFor(model => model.ImageURL, "Hình đứng")
                </div>
           

                 @Html.TextBoxFor(model => model.ImageURL, new { type = "file",multiple = "multiple",id="img1"})
                <div><img id="image1" src="/Image/Icon/na.jpg"  style="width:200px;height:200px" /></div>
                <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.ImageURL)</p>
            </td>
        </tr>
        <tr>
            <td style="padding: 0px 10px 0px 20px" colspan="2">
                <div style="font-weight: bold">
                    @Html.LabelFor(model => model.ImageURL, "Hình ngang")
                </div>
            @Html.TextBoxFor(model => model.ImageURL, new { type = "file",id="img2",multiple = "multiple" })
                <div ><img id="image2" src="/Image/Icon/na.jpg"  style="width:400px;height:200px"/></div>
                <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.ImageURL)</p>
            </td>
        </tr>
        <tr>
            <td style="padding: 0px 10px 0px 20px" colspan="2">
                <div style="font-weight: bold">
                    @Html.LabelFor(model => model.TrailerURL, "Trailer")
                </div>
                <div class="input-control text">
                    @Html.EditorFor(model => model.TrailerURL)
                    <p style="color: red; font-size: 10pt">@Html.ValidationMessageFor(model => model.TrailerURL)</p>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div>
                    <input class="button info" type="submit" value="Lưu" style="width: 77px" />
                    <input class="button info" type="reset" value="Xoá" style="width: 77px" />
                    <button class="button danger" style="float: right">
                        @Html.ActionLink("Quay Lại", "Index")
                    </button>
                </div>

            </td>
        </tr>

    </table>
}

<div id="categoryPartial" style="display: none">
    @Html.Partial("CategoryPartial", new FTBS.Models.Entities.Category())
</div>

<div id="formatPartial" style="display: none">
    @Html.Partial("FormatPartial", new FTBS.Models.Entities.Format())
</div>

<script>
    function ActiveCate() {
        //Get value of div with id="categoryPartial" -> set attribute display = normal to show CreateCategory form
        var categoryPartial = document.getElementById("categoryPartial");
        categoryPartial.setAttribute("style", "display:normal");

        var formatPartial = document.getElementById("formatPartial");
        formatPartial.setAttribute("style", "display:none");

        //Send data = null to clear object after create
        $.ajax({
            url: "/Film/CategoryPartial",
            type: "GET",
            data: { categoryModel: null },
            success: function (data) {
                $('#categoryPartial').html(data);
            },
            error: function (data) {
                alert("fail");
            }
        });
    }
    function readURL(input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#image1').attr('src', e.target.result);
               
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
    function readURL2(input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#image2').attr('src', e.target.result);

            }

            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#img2").change(function () {
        readURL2(this);
    });
    $("#img1").change(function () {
        readURL(this);
    });
    function ActiveFormat() {
        //Get value of div with id="formatPartial" -> set attribute display = normal to show FormatPartial form
        var formatPartial = document.getElementById("formatPartial");
        formatPartial.setAttribute("style", "display:normal");

        var categoryPartial = document.getElementById("categoryPartial");
        categoryPartial.setAttribute("style", "display:none");

        //Send data = null to clear object after create
        $.ajax({
            url: "/Film/FormatPartial",
            type: "GET",
            data: { formatModel: null },
            success: function (data) {
                $('#formatPartial').html(data);
            },
            error: function (data) {
                alert("fail");
            }
        });
    }
</script>



